<template>
	<view class="bargain-record">
		<view class="bargain-record-hd">砍价记录</view>
		<view class="bargain-record-bd">
			<view class="bargain-record-item" v-for="(item,index) in showList" :key="item.id">
				<bargain-record-item :item="item"></bargain-record-item>
			</view>
		</view>
		<view class="mc-flex-vcenter mc-flex-center padding-bottom30 padding-top30 padding-left48" v-if="total>3">
			<text class="mc-gray mc-f13 padding-right10" @tap="toRecord">查看全部记录</text>
			<image src="../../../static/images/right-arrow.png" class="width24 height24" @tap="toRecord"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	import bargainRecordItem from '@/components/home/bargain-record-item/index.vue'
	export default {
		components: {
			bargainRecordItem
		},
		props: {
			// info: {
			// 	type: Object,
			// 	default: {}
			// },
		},
		data() {
			return {
				bargainPartakeId: null,
				info: null,
				list: [],
				total: 0
			}
		},
		computed: {
			...mapGetters('user', ['_gameInfo']),
			...mapGetters('pop', ['_popKey']),
			showList: function() {
				const list = this.list.slice(0, 3)
				return list
			},
			lastHelp: function() {
				let lastUser = null;
				// console.log('this._popKey',this._popKey)
				if (this.list.length > 1 && this.info && this.info.userId === this._gameInfo.userId) {
					for (let i in this.list) {
						if (this.list[i].userId != this._gameInfo.userId) {
							let progress = (parseFloat(this.info.cutDownPrice * 100) / this.info.price).toFixed(1);
							progress = progress > 100 ? 100 : progress;
							lastUser = {
								createTime: this.list[i].createTime,
								nickName: this.list[i].nickName,
								photo: this.list[i].photo,
								helpUserNum: this.total,
								cutDownPrice: this.info.cutDownPrice,
								progress: progress || 0
							}
							break;
						}
					}
					const lastTime = uni.getStorageSync('bargainLastTimeBy' + this.info.id);
					// console.log('lastTime', lastTime)
					// console.log('lastUser.createTime', lastUser.createTime)
					if (lastTime && lastUser && lastTime > lastUser.createTime) { //不需要弹窗
						lastUser = null
					}
				}
				return lastUser
			}
		},
		watch: {
			lastHelp: function(newVal, oldVal) {
				console.log('this._popKey', this._popKey)
				if (!oldVal && newVal && !this._popKey) {
					this.popShow({
						key: 'cBargainHelp',
						value: {
							avatar: newVal.photo,
							nameStr: newVal.nickName + '等' + newVal.helpUserNum + '人',
							num: newVal.cutDownPrice,
							progress: newVal.progress
						}
					});

					const now = new Date().getTime();
					console.log('now', now)
					uni.setStorageSync('bargainLastTimeBy' + this.info.id, now)
				}
			}
		},
		methods: {
			...mapActions('pop', ['popShow']),
			...mapActions('draw', ['bargainRecordListUp']),
			// 记录列表
			async getBargainRecordList(id, info) {
				this.bargainPartakeId = id;
				this.info = info;
				let res = await this.$api.bargain.getBargainRecordList({
					id,
					page: 1,
					rows: 3
				}) || {}
				this.list = res.list || [];
				this.total = res.total || 0;
			},
			toRecord() {
				uni.navigateTo({
					url: '/pages/bargain/record/record?bargainPartakeId=' + this.bargainPartakeId
				})
			},
			// ---------------------------------------
			// 保存二维码
			setFormId(e) {
				this.$store.dispatch('common/formIdListUp', {
					e: e,
					isSave: true
				})
			},
		},
		mounted() {}
	}
</script>

<style lang="scss" scoped>
	.bargain-record {
		position: relative;
		width: 706rpx;
		margin: 30rpx auto;
		z-index: 9;
		background-color: white;
		border-radius: 10rpx;
		overflow: hidden;

		.bargain-record-hd {
			position: relative;
			text-align: center;
			font-weight: bold;
			margin: 30rpx auto 16rpx;

			&:before {
				content: ' ';
				position: absolute;
				top: 50%;
				left: 120rpx;
				right: 440rpx;
				border-bottom: 1px solid #ffd9b4;
			}

			&:after {
				content: ' ';
				position: absolute;
				top: 50%;
				left: 440rpx;
				right: 120rpx;
				border-bottom: 1px solid #ffd9b4;
			}
		}

		.bargain-record-item {
			position: relative;
			padding: 24rpx 50rpx;

			&:before {
				content: ' ';
				position: absolute;
				bottom: 0;
				left: 40rpx;
				right: 40rpx;
				border-bottom: 1px solid #e5e5e5;
				opacity: 0.6;
			}

			&:last-child:before {
				right: 0;
			}
		}
	}
</style>
